<template>
	<view :class="[primarySize()]">
		<view class="container">
			<view class="page-head flex-box">
				<view class="tab_item flex-grow-1" v-if="userinfo.group_id!=1" :class="{active:job_type==0}"
					@click="nav(0)">人才</view>
				<view class="tab_item flex-grow-1" v-if="userinfo.group_id==1" :class="{active:job_type==1}"
					@click="nav(1)">职位</view>
				<view class="tab_item flex-grow-1" :class="{active:job_type==2}" @click="nav(2)">企业</view>
			</view>
			<view class="pt88 plr30 pb30" v-if="job_type == 0">
				<view class="pt30">

					<navigator :url="'/pages/company/talent_details?id='+item.id" class="recom_item"
						v-for="(item,index) in resumeList">
						<view class="recom_info">
							<view class="m-list-flex">
								<view class="m-cell-bd">
									<view class="recom_text m-list-flex">
										<view class="recom_tit m-cell-bd">{{item.personal.realname}}</view>
										<view class="col9 fs24">{{formatDatetime(item.updatetime,'yyyy-mm-dd')}}</view>
									</view>
									<block v-if="item.star">
										<view class="fs24 col3 pt20">期望岗位：<text
												class="col0">{{item.job_intention.fav_category.category_name}}</text>
										</view>
										<view class="fs24 col3 pt10">期望薪资：<text
												class="recom_price">{{item.job_intention.expect_salary.name}}/月</text>
										</view>
									</block>
									<view v-else class="recom_price">
										<text
											v-for="(intention,it_index) in item.job_intention">{{intention.expect_salary.name}}/月{{it_index != item.job_intention.length - 1 ?'、':''}}</text>
									</view>
								</view>
							</view>

							<view class="recom_type clearfix">
								<view class="recom_type_item" v-if="item.job_intention.length>0"
									v-for="(intention,it_index) in item.job_intention">
									{{intention.fav_city.shortname}}
								</view>
								<view class="recom_type_item">{{item.personal.work_experience.name}}</view>
								<view class="recom_type_item">{{item.personal.education_level.name}}</view>
								<view class="recom_type_item">{{item.job_intention.job_type_text}}</view>
								<view class="recom_type_item" v-for="(tag,i) in item.personal_tags">{{tag.name}}
								</view>
							</view>
						</view>
						<view class="recom_business" v-if="!item.star">
							<image src="/static/public/icon_pack.png" mode="aspectFit"></image>
							<view class="col0">求职意向：
								<text v-if="item.job_intention.length>0"
									v-for="(intention,it_index) in item.job_intention">{{intention.fav_category.category_name}}</text>
							</view>
						</view>
						<view class="recom_btn m-list-flex">
							<button @click.stop="unfav(index)" hover-class="none" class="m-cell-bd">取消收藏</button>
							<button @click.stop="createInterview(index)" hover-class="none"
								class="m-cell-bd invite">面试邀请</button>
						</view>
						<image v-if="item.top" src="/static/public/icon54.png" class="icon_recommend"></image>
					</navigator>
					<view class="nothing" v-if="resumeListMore.nothing">
						<image class="img_nothing" src="/static/public/icon_nothing.png" mode="aspectFill"></image>
						<text>抱歉，暂无相关信息</text>
					</view>
					<button @click="fetchResume" v-else hover-class="none"
						class="more_btn mt30">{{resumeListMore.text}}</button>
				</view>
			</view>
			<view class="pt88 plr30 pb30" v-if="job_type == 1">
				<view class="pt30">
					<template v-for="(item,index) in jobs">
						<navigator hover-class="none" :url="'/pages/user/post_info?id='+item.id" class="recom_item">
							<view class="recom_info">
								<view class="m-list-flex">
									<view class="m-cell-bd">
										<view class="recom_text m-list-flex">
											<view class="recom_tit m-cell-bd">{{item.job_name}}</view>
											<view class="recom_price">{{item.salary_text}}</view>
										</view>
										<view class='m-list-flex pt10'>
											<view class="fs24 col3  m-cell-bd">{{item.city.shortname}} |
												{{item.enterpriseinfo.company_name||item.enterpriseinfo.full_name}}
											</view>
											<view class="col9 fs24">{{item.refresh_date}}</view>
										</view>

									</view>
								</view>
								<view class="recom_type clearfix">
									<view class="recom_type_item">{{item.education_level.name}}</view>
									<view class="recom_type_item">{{item.work_experience.name}}</view>
									<view class="recom_type_item" v-for="(benefit,benefitIndex) in item.benefits">
										{{benefit.name}}
									</view>
								</view>
							</view>
							<view class="recom_btn m-list-flex">
								<button hover-class="none" @click.stop="bindUnfavJob(index)"
									class="m-cell-bd">取消收藏</button>
								<button hover-class="none" @click.stop="bindApplyJob(index)"
									class="m-cell-bd invite">投递简历</button>
							</view>
						</navigator>
					</template>
					<view class="nothing" v-if="jobsMore.nothing">
						<image src="@/static/public/icon_nothing.png" mode="aspectFit"></image>
						<text>暂无职位</text>
					</view>
					<view class="g-btn3-wrap" v-else>
						<view class="g-btn3" @click="fetchJob()">{{jobsMore.text}}</view>
					</view>
				</view>
			</view>

			<view class="pt88 plr30 pb30" v-if="job_type == 2">
				<view class="pt30" v-if="companyList.length>0">
					<business :toggleFav="true" :business='companyList'></business>
				</view>
				<view class="nothing" v-if="companyListMore.nothing">
					<image src="@/static/public/icon_nothing.png" mode="aspectFit"></image>
					<text>暂无企业</text>
				</view>
				<view class="g-btn3-wrap" v-else>
					<view class="g-btn3" @click="fetchCompany()">{{companyListMore.text}}</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	const app = getApp();
	import jobList from '../../components/job-list/job-list.vue';
	import business from '../../components/business/business.vue';
	export default {
		components: {
			jobList,
			business
		},
		data() {
			return {

				userinfo: {},
				job_type: 1,
				jobs: null,
				jobsMore: {
					page: 1
				},
				resumeListMore: {
					page: 1
				},
				resumeList: null,
				companyList: null,
				companyListMore: {
					page: 1
				},
			}
		},
		onReady() {
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.primaryColor()
			})
		},
		onShow() {
			this.$forceUpdate()
		},
		onLoad() {

			let userinfo = this.$core.getUserinfo();
			this.userinfo = userinfo;
			if (userinfo.group_id == 1) {
				this.fetchJob();
				this.job_type = 1
			} else {
				this.fetchResume();
				this.job_type = 0
			}
			uni.$on(app.globalData.Events.ResumeFavAdd, this.eventOnResumeFavAdd);
			uni.$on(app.globalData.Events.ResumeFavRemove, this.eventOnResumeFavRemove);
			uni.$on(app.globalData.Events.JobFavAdd, this.eventOnJobFavAdd);
			uni.$on(app.globalData.Events.JobFavRemove, this.eventOnJobFavRemove);
			uni.$on(app.globalData.Events.CompanyFavAdd, this.eventOnCompanyFavAdd);
			uni.$on(app.globalData.Events.CompanyFavRemove, this.eventOnCompanyFavRemove);
		},
		onUnload() {
			uni.$off(app.globalData.Events.ResumeFavAdd, this.eventOnResumeFavAdd);
			uni.$off(app.globalData.Events.ResumeFavRemove, this.eventOnResumeFavRemove);
			uni.$off(app.globalData.Events.JobFavAdd, this.eventOnJobFavAdd);
			uni.$off(app.globalData.Events.JobFavRemove, this.eventOnJobFavRemove);
			uni.$off(app.globalData.Events.CompanyFavAdd, this.eventOnCompanyFavAdd);
			uni.$off(app.globalData.Events.CompanyFavRemove, this.eventOnCompanyFavRemove);

		},
		onReachBottom() {
			if (this.job_type == 0) {
				this.fetchResume()
			} else if (this.job_type == 1) {
				this.fetchJob();
			} else {
				this.fetchCompany()
			}
		},
		methods: {
			nav(jobType) {
				this.job_type = jobType;
				if (this.job_type == 1 && this.jobs === null) {
					this.jobs = [];
					this.fetchJob();
				} else if (this.job_type == 2 && this.companyList === null) {
					this.companyList = [];
					this.fetchCompany();
				} else if (this.job_type == 0 && this.resumeList === null) {
					this.fetchResume()
				}
			},
			bindUnfavJob(index) {
				let jobs = this.jobs[index];
				this.$core.post({
					url: '/xilujob.job/toggle_fav',
					data: {
						job_id: jobs.id
					},
					success: ret => {
						if (!ret.data.is_fav) {
						
							uni.$emit(app.globalData.Events.JobFavRemove, {
								job: jobs
							});
						}
					}
				});
			},
			bindApplyJob(index) {

				let job = this.jobs[index];
				this.$core.post({
					url: 'xilujob.job/apply',
					data: {
						job_id: job.id
					},
					success: ret => {
						uni.showToast({
							title: ret.msg,
							icon: 'none'
						});
					}
				});
			},
			fetchResume() {
				this.$util.fetch(this, 'xilujob.resume/fav_list', {}, 'resumeListMore', 'resumeList', 'data', 'unique');
			},
			fetchJob() {
				console.log(111);
				this.$util.fetch(this, 'xilujob.job/fav_list', {}, 'jobsMore', 'jobs', 'data', 'unique');
			},
			fetchCompany() {
				this.$util.fetch(this, 'xilujob.company/fav_list', {}, 'companyListMore', 'companyList', 'data', 'unique');
			},
			eventOnResumeFavAdd(data) {
				let resume = data.resume,
					index = this.$util.getListItemIndexById(this.resumeList, resume.id);
				if (index === -1) {
					this.resumeList.splice(0, 0, resume);
				}
			},
			eventOnResumeFavRemove(data) {
				let resume = data.resume,
					index = this.$util.getListItemIndexById(this.resumeList, resume.id);
				if (index !== -1) {
					this.resumeList.splice(index, 1);
					this.$forceUpdate()
				}
			},

			eventOnJobFavAdd(data) {
				let job = data.job,
					index = this.$util.getListItemIndexById(this.jobs, job.id);
				if (index === -1) {
					this.jobs.splice(0, 0, job);
				}
			},
			eventOnJobFavRemove(data) {
				let job = data.job,
					index = this.$util.getListItemIndexById(this.jobs, job.id);
				if (index !== -1) {
					this.jobs.splice(index, 1);
					this.$forceUpdate()
				}
			},

			eventOnCompanyFavAdd(data) {
				let company = data.company,
					index = this.$util.getListItemIndexById(this.companyList, company.id);
				if (index === -1) {
					this.companyList.splice(0, 0, company);
					this.fetchCompany()
				}
			},
			eventOnCompanyFavRemove(data) {
				let company = data.company,
					index = this.$util.getListItemIndexById(this.companyList, company.id);
				if (index !== -1) {
					this.companyList.splice(index, 1);
				}
			},



			unfav(index) {
				let resume = this.resumeList[index];
				uni.showModal({
					title: '提示',
					content: '是否取消收藏？',
					success: res => {
						if (res.confirm) {
							this.$core.post({
								url: '/xilujob.resume/toggle_fav',
								data: {
									id: resume.id
								},
								success: ret => {
									if (!ret.data.is_fav) {
										uni.$emit(app.globalData.Events.ResumeFavRemove, {
											resume: resume
										});
									}
								}
							});
						}
					}
				})

			},

			createInterview(index) {
				if(this.$core.getUserinfo().group_id!=2) {
					uni.showToast({title:'请切换到公司身份',icon:'none'});
					return;
				}
				let resume = this.resumeList[index];
				this.$core.post({url:'xilujob.resume/get_interview',data:{resume_id:resume.id,user_id:resume.user_id},success:ret=>{
						uni.navigateTo({
							url: '/pages/company/invite_interview',
							events: {
								dataTransfer: data => {

								}
							},
							success: res => {
								res.eventChannel.emit('dataTransfer', {resume:resume});
							}
						});
					},fail:ret=>{
						uni.showModal({
							title: "提示",
							content: ret.msg,
							success(res){
								if(res.confirm){
								}
							}
						})
						return false;
					}});

			},

		}
	}
</script>

<style lang="scss" scoped>
	.pt88 {
		padding-top: 88rpx;
	}

	.page-head {
		height: 88rpx;
		background: var(--primary);

		.tab_item {
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			font-size: 26rpx;
			color: #FFFFFF;

			&.active {
				font-weight: bold;
				font-size: 26rpx;
				color: #FFFFFF;
				position: relative;

				&::after {
					content: '';
					width: 36rpx;
					height: 6rpx;
					background: #FFFFFF;
					border-radius: 4rpx;
					position: absolute;
					bottom: 0;
					left: 50%;
					transform: translateX(-50%);
				}
			}
		}
	}

	.post {
		&_list {
			padding-top: 10rpx;
		}

		&_item {
			width: 690rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.03);
			border-radius: 18rpx;
			margin-top: 20rpx;
			padding: 30rpx;

			.maxw60 {
				max-width: 60%;
			}

			.urgent {
				width: 74rpx;
				height: 37rpx;
				line-height: 33rpx;
				text-align: center;
				font-size: 24rpx;
				color: var(--primary);
				border-radius: 6rpx;
				border: 2rpx solid var(--primary);
			}

			.tips_item {
				height: 32rpx;
				background: #ECEFF5;
				border-radius: 4rpx;
				font-weight: 400;
				font-size: 22rpx;
				color: #A5A5A5;
				line-height: 32rpx;
				display: inline-block;
				vertical-align: top;
				margin-right: 10rpx;
				margin-top: 10rpx;
				padding: 0 8rpx;
			}

			.cover {
				width: 40rpx;
				height: 40rpx;
				border-radius: 50%;
			}
		}
	}


	.recom_item {
		box-shadow: 0px 1px 18px 0px rgba(0, 0, 0, 0.06);
		background-color: #fff;
		border-radius: 4rpx;
		border: 1rpx solid #EBEBEB;
		margin-bottom: 18rpx;
		padding-top: 35rpx;
		position: relative;
		overflow: hidden
	}

	.recom_text .top {
		position: absolute;
		top: 0;
		right: 0;
		width: 74rpx;
		height: 74rpx;
	}

	.recom_item:nth-last-child(1) {
		margin-bottom: 0;
	}

	.recom_tit {
		font-size: 32rpx;
		color: #333;
		font-weight: bold;
		display: inline-block;
		vertical-align: middle
	}

	.recom_price {
		font-size: 28rpx;
		color: #f21b23;
		font-weight: bold;
		padding-top: 20rpx;
	}

	.recom_type {
		padding-top: 20rpx;
	}

	.recom_type_item {
		font-size: 20rpx;
		color: #999;
		background-color: #F7F7F7;
		float: left;
		line-height: 39rpx;
		padding: 0 15rpx;
		border-radius: 8rpx;
		margin-right: 17rpx;
		margin-bottom: 17rpx;
	}

	.recom_info {
		padding: 0 30rpx 15rpx;
	}

	.clearfix {
		display: block;
	}

	.clearfix:after {
		content: "$";
		display: block;
		height: 0;
		clear: both;
		visibility: hidden;
		overflow: hidden;
	}

	.single-line {
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}

	.multi-line {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.recom_business {
		font-size: 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 30rpx;
		border-top: 1rpx solid #F6F6F6
	}

	.recom_business image {
		width: 24rpx;
		height: 24rpx;
		margin-right: 7rpx;
		display: block;
	}

	.recom_business .col0 {
		color: #000;
		flex: 1;
		overflow: hidden
	}

	.recom_business .col9 {
		color: #999
	}

	.recom_text image {
		width: 32rpx;
		height: 32rpx;
		display: inline-block;
		vertical-align: middle;
		margin-left: 12rpx;
	}


	.order_info {
		text-align: center;
		line-height: 36rpx;
		background: var(--primary);
		font-size: 22rpx;
		border-radius: 8rpx;
		overflow: hidden
	}

	.colff7 {
		color: var(--primary)
	}

	.colf {
		color: #fff
	}

	.bgf {
		background-color: #fff;
		border-radius: 0 0 8rpx 8rpx
	}

	.order_info>view {
		width: 121rpx;
	}

	.p1 {
		padding: 1rpx;
		box-sizing: border-box
	}

	.recom_btn {
		border-top: 1rpx solid #F6F6F6
	}

	.recom_btn button {
		line-height: 88rpx;
		height: 88rpx;
		color: #999999;
		font-size: 24rpx;
	}

	.recom_btn .invite {
		color: var(--primary);
		position: relative
	}

	.recom_btn .invite::after {
		content: '';
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		width: 1rpx;
		height: 22rpx;
		background-color: #F3F3F3;
		display: block
	}
</style>